<!-- 院内活动 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <el-form ref="ruleFormRef" :model="form" label-width="auto" :inline="true">
        <el-form-item label="分类:" prop="type">
          <el-select v-model="form.type" placeholder="请选择" style="width: 200px" clearable>
            <el-option v-for="item in playTypeData" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="老人姓名:">
          <el-input v-model="form.name" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="关键字:">
          <el-input v-model="form.key" clearable placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="上报时间:">
          <el-date-picker
            v-model="value"
            type="daterange"
            clearable
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="datachange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <ELTable v-bind="tableConfig" ref="acivityTable">
        <template #btns="{ deleteAll }">
          <el-button type="success" @click="add">
            <el-icon class="icon">
              <Plus />
            </el-icon>
            添加老人活动
          </el-button>
          <el-button type="danger" @click="deleteAll">
            <el-icon class="icon">
              <Delete />
            </el-icon>
            批量删除
          </el-button>
        </template>

        <template #addTime="{ scope }">
          {{ dayjs(scope.row.addTime).format("YYYY-MM-DD") }}
        </template>
        <template #elderly="{ scope }">
          {{ scope.row.elderly.map((item: any) => item.elderlyName).join(" ") }}
        </template>

        <template #operate="{ scope, deleteHandle }">
          <el-button :icon="Edit" text size="small" class="btn" @click="uploadEdit(scope.row.id)">
            编辑
          </el-button>
          <el-button
            :icon="Delete"
            text
            size="small"
            class="btn"
            @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>
          <el-button
            :icon="Tickets"
            text
            size="small"
            class="btn"
            @click="handelDetails(scope.row.id)"
          >
            查看详情
          </el-button>
        </template>
      </ELTable>
    </el-card>

    <!-- 添加 -->
    <acivityDialog v-if="dialogVisible" :listParams="listParams" @close="handelClose" />
    <!-- 详情 -->
    <itemDialog v-if="dialogVisibleItem" :id="ids" @itemClose="handelCloseItem" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { Search, Refresh, Delete, Edit, Tickets } from "@element-plus/icons-vue";
import { FormInstance } from "element-plus";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { playDel, playDelAll, playList, playType } from "@/api/care/activity/activity";
import acivityDialog from "@/components/care/activityAdd.vue";
import itemDialog from "@/components/care/activityItem.vue";
import dayjs from "dayjs";
import { addPlayParams, playListParams } from "@/api/care/activity/type";

const dialogVisible = ref(false); //添加弹框
const dialogVisibleItem = ref(false); //详情弹框

const value = ref([]);
const form = reactive<playListParams>({
  page: 1,
  pageSize: 10,
  name: "",
  beginDate: "",
  endDate: "",
  type: undefined,
  key: "",
});

let listParams = ref(0);

// 获取活动列表
const playTypeData = ref<any[]>([]);
const getPlayType = async () => {
  let res = await playType();
  console.log(res);
  playTypeData.value = res.list;
};

// 添加
const add = () => {
  listParams.value = 0;
  dialogVisible.value = true;
};

// 编辑
const uploadEdit = (id: number) => {
  listParams.value = id;
  dialogVisible.value = true;
};

// 详情
let ids = ref(0);
const handelDetails = (id: number) => {
  dialogVisibleItem.value = true;
  console.log(id);
  ids.value = id;
};

// 搜索
const search = () => {
  form.page = 1;
  acivityTable.value.getData(form);
};

// 重置
const ruleFormRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  value.value = [];
};

// 日期
const datachange = (e: any) => {
  // console.log(e);
  if (e != null) {
    form.beginDate = e[0];
    form.endDate = e[1];
  } else {
    form.beginDate = "";
    form.endDate = "";
  }
};

// 关闭弹框
const acivityTable = ref();
const handelClose = () => {
  dialogVisible.value = false;
  acivityTable.value.getData();
};

const handelCloseItem = () => {
  dialogVisibleItem.value = false;
};

// 表格
const tableConfig = reactive<TableData>({
  loadData: playList,
  delete: playDel,
  deleteAll: playDelAll,
  columns: [
    {
      prop: "id",
      label: "序号",
      attrs: {
        width: "70px",
      },
    },
    {
      prop: "title",
      label: "标题",
    },
    {
      prop: "addTime",
      label: "上报时间",
      slot: true,
    },
    {
      prop: "typeName",
      label: "分类",
    },
    {
      prop: "addAccountName",
      label: "上报人",
    },
    {
      prop: "elderly",
      label: "老人姓名",
      slot: true,
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
      attrs: {
        width: "270px",
      },
    },
  ],
});

onMounted(() => {
  getPlayType();
});
</script>

<style scoped lang="less">
.btn {
  color: rgb(64, 158, 255);
}

.btn:nth-child(2) {
  color: rgb(245, 108, 127);
}
</style>
